
<script setup>
	
	import { ref } from 'vue';
	import { begin_api } from '@/common/apis/books';
	import c_ranklist from './components/ranklist.vue';
	import { getExerDetail_api, getArticleList_api } from '@/common/apis/course';
	
	
	/** props */
	const props = defineProps(['courseId', 'exerciseId', 'sentencesId']);
	
	
	/** 文章列表 */
	const articlelist = ref([]);
	
	/** 获取文章列表方法 */
	const getlist = async () => {
		const result = await getArticleList_api({ courseId: props.courseId, sentencesId: props.sentencesId, userId: 0 });
		articlelist.value = result;
	};
	
	
	/** 练习详情 */
	const info = ref({});
	
	/** 获取练习详情方法 */
	const getInfo = async () => {
		const result = await getExerDetail_api({ id: props.exerciseId, userId: 0 });
		info.value = result;
		await getlist();
	};
	
	/** 获取练习详情 */
	getInfo();
	
	
	/** 关卡组件实例 */
	const ranklistRef = ref({});
	
	/** 确认选择时 */
	async function begin() {
		if(!ranklistRef.value.activeId) {
			uni.$fui.toast('请先选择关卡~');
			return;
		};
		
		const { id } = await begin_api({ sourceType: 2, sourceId: ranklistRef.value.activeId });
		uni.$fui.href('/pages/course/word-string/info', { articleId: ranklistRef.value.activeId, exerciseId: props.exerciseId, startId: id });
	};
	
	
</script>

<template>
	<view class="containerbox bg-white">
		<uv-navbar :title="info.course?.name" auto-back placeholder />
		
		<scroll-view class="containerbox" scrollY>
			<c_ranklist :list="articlelist" ref="ranklistRef" @callback="begin"/>
		</scroll-view>
		
		
		<!-- <view class="flex items-center justify-between bottombox">
			<view class="btn bgc-primary" @click="begin">确认选择</view>
		</view> -->
	</view>
</template>


<style lang="scss" scoped>
.bottombox{padding: 20rpx 32rpx}
.btn{height: 80rpx;border-radius: 12rpx;flex: 1;text-align: center;line-height: 80rpx;color: #fff;font-size: 28rpx}
</style>